* {
  margin: 0;
  padding: 0;
}

img {
  display: block;
}

.box {
  width: 350px;
  height: 350px;
  margin: 0 auto;
  /* border: 5px solid red; */
  position: relative;
  overflow: hidden;
}

img,
p,
h2 {
  transition: all 1s;
}

.box .pic {
  width: 100%;
}

.box:hover .pic {
  transform: translateY(-20px);
  opacity: 0.5;
}

.box h2 {
  position: absolute;
  left: 60px;
  top: 100px;
  color: white;
  transform: translateY(-200px);
}

.box:hover h2 {
  transform: translateY(-30px);
}

.box p {
  position: absolute;
  bottom: 0px;
  left: 80px;
  /* transform: translateY(30px); */
  opacity: 0;
}

.box:hover p {
  transform: translateY(-20px);
  opacity: 1;
}

.box .music {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 40px;
  height: 40px;
  animation: run 1s linear infinite;
}

@keyframes run {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.box:hover .music {
  /* transform: rotate(360deg); */
}